<template>
  <div>
    <p>标签</p>
    <van-tag>标签</van-tag>
    <p>按钮</p>
    <van-button type="default">默认按钮</van-button>
    <p>折叠面板</p>
    <van-collapse v-model="activeNames">
      <van-collapse-item title="有赞微商城" name="1">
        提供多样店铺模板，快速搭建网上商城
      </van-collapse-item>
      <van-collapse-item title="有赞零售" name="2">
        网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
      </van-collapse-item>
      <van-collapse-item title="有赞美业" name="3">
        线上拓客，随时预约，贴心顺手的开单收银
      </van-collapse-item>
    </van-collapse>
    <van-cell-group>
      <p>Cell</p>
      <van-cell title="单元格" value="内容" />
      <van-cell title="单元格" value="内容" label="描述信息" />
    </van-cell-group>
    <p>圆环进度条</p>
    <van-circle v-model="currentRate" :rate="30" :speed="100" :text="text" />
    <p>徽章</p>
    <van-badge-group :active-key="activeKey">
      <van-badge title="标签名称" />
      <van-badge title="标签名称" info="8" />
      <van-badge title="标签名称" info="99" />
      <van-badge title="标签名称" info="199" />
    </van-badge-group>
    <p>ICON</p>
    <van-icon name="success" />
    <p>懒加载</p>
    <img v-for="(img, i) in imageList" :key="i" v-lazy="img">
    <!-- <p>LIST</p>
    <van-list v-model="loading" :finished="finished" @load="onLoad">
      <van-cell v-for="item in list" :key="item" :title="item + ''" />
      <p>Loading</p>
      <van-loading color="black" />
    </van-list> -->
    <p>Navbar</p>
    <van-nav-bar title="标题" left-text="返回" right-text="按钮" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
    <van-notice-bar
  text="足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。"
  left-icon="https://img.yzcdn.cn/1.png"
/>
<p>分页</p>
<van-pagination 
  v-model="currentPage" 
  :total-items="24" 
  :items-per-page="5"
/>
<p>popup</p>
<van-popup v-model="popshow" position="bottom" :overlay="true" :lock-scroll="true">
  内容
</van-popup>
<van-button type="default" @click.native="popshow = true">默认按钮</van-button>
<p>进度条</p>
<van-progress :percentage="50" />
<p>评分</p>
<van-rate v-model="rateValue" />
<p>step</p>
<van-stepper v-model="stepVal" />
<p>轮播</p>
<van-swipe :autoplay="3000">
  <van-swipe-item v-for="(image, index) in imageList" :key="index">
    <img v-lazy="image" />
  </van-swipe-item>
</van-swipe>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        stepVal: 1,
        rateValue: 3,
        popshow: false,
        currentPage: 1,
        activeNames: ['1'],
        currentRate: 0,
        activeKey: 0,
        imageList: [
          'https://img.yzcdn.cn/public_files/2017/09/05/4e3ea0898b1c2c416eec8c11c5360833.jpg',
          'https://img.yzcdn.cn/public_files/2017/09/05/fd08f07665ed67d50e11b32a21ce0682.jpg',
          'https://img.yzcdn.cn/public_files/2017/09/05/3bd347e44233a868c99cf0fe560232be.jpg'
        ],
        list: [],
        loading: false,
        finished: false,

      }
    },
    computed: {
      text() {
        return this.currentRate.toFixed(0) + '%'
      }
    },
    methods: {
      onLoad() {
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1);
          }
          this.loading = false;

          if (this.list.length >= 40) {
            this.finished = true;
          }
        }, 500);
      },
      onClickLeft() {
        this.$toast('返回');
      },
      onClickRight() {
        this.$toast('按钮');
      }
    }
  }

</script>

<style lang="less" scoped>
@import '~assets/less/ui.less';
</style>
